<script setup>
import { ref } from 'vue';

const tags = ref([
  { name: 'Vue', count: 15 },
  { name: 'React', count: 12 },
  { name: 'JavaScript', count: 20 },
  { name: 'TypeScript', count: 8 },
  { name: 'Node.js', count: 10 }
]);
</script>

<template>
  <div class="tags-card">
    <h3>标签云</h3>
    <div class="tags-container">
      <span v-for="tag in tags" 
            :key="tag.name" 
            class="tag-item"
            :style="{ fontSize: `${14 + tag.count/5}px` }">
        #{{ tag.name }}
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tags-card {
  padding: var(--space);
  background: var(--white);
  border-radius: var(--radius);

  h3 {
    margin-bottom: var(--gap);
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
  }

  .tag-item {
    cursor: pointer;
    color: var(--primary-color);
    transition: all var(--transition-duration);

    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
